<template>
  <div class="process-box">
<!--    -->
<!--    @onClose="onCloseSearch"-->
<!--    <device-search-->
<!--      ref="deviceSearch"-->
<!--      @onSearch="onSearch"-->
<!--    ></device-search>-->
<!--      设备分类-->
      <div class="process-left">
        <paper-cate
          ref="paperCate"
          :setCurrent="setCurrent"
          :current="current"
          :url="{
                prace: 1,
                cateType: 2,
                update:'/device/devicecate/update',
                save:'/device/devicecate/save',
                delete:'/device/devicecate/delete',
                tree:'/device/devicecate/tree'
                }"
        />
      </div>
    <div class="process-right">
      <el-form :model="dataForm" :inline="true">
<!--        <el-form-item prop="deviceName">-->
<!--          <el-input v-model="dataForm.deviceName" placeholder="请输入设备名称" clearable @clear="getDataList()"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item prop="useCompany">-->
<!--          <el-input v-model="dataForm.useCompany" placeholder="请输入使用单位" clearable @clear="getDataList()"></el-input>-->
<!--        </el-form-item>-->
        <device-search  ref="deviceSearch" @onSearched="onSearch"></device-search>
<!--        <region-search ref="regionSearch" @onSearched="onSearch" />-->
        <el-form-item>
          <el-button type="primary" @click="decicvSearch()">搜索</el-button>
<!--          <el-button type="primary" @click="getDataList()">搜索</el-button>-->
          <el-button type="primary" @click="addDeveice()">新增</el-button>
          <el-button type="primary" @click="_import()">导入</el-button>
          <el-button type="primary"  @click="_export()">导出</el-button>
          <el-button type="danger" @click="deleteDeveice()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
          <el-button type="success" @click="displayList()">列表显示</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        @selection-change="selectionChangeHandle"
      >
        <el-table-column type="selection" align="center" width="50" />
        <el-table-column label="设备名称" prop="name" align="center"/>
        <el-table-column label="设备编号" prop="deviceSerialNumber" align="center"/>
        <el-table-column label="出厂编号" prop="factoryNumber" align="center"/>
        <el-table-column label="区域负责人" prop="areaUserName" align="center"/>
        <el-table-column label="设备数量" prop="number" align="center"/>
        <el-table-column label="技术参数" prop="technicalParameter" align="center"/>
        <el-table-column label="设备状态" prop="status" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1">在用</el-tag>
            <el-tag v-if="scope.row.status === 2">闲置</el-tag>
            <el-tag v-if="scope.row.status === 3">待修</el-tag>
            <el-tag v-if="scope.row.status === 4">借入</el-tag>
            <el-tag v-if="scope.row.status === 5">借出</el-tag>
            <el-tag v-if="scope.row.status === 6">报废</el-tag>
            <el-tag v-if="scope.row.status === 7">其他</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="使用/存放地点" prop="useStorageLocation" align="center"/>
        <el-table-column label="防爆合格证" prop="certificate" align="center"/>
        <el-table-column v-if="statusForm.cateChecked === true" label="所属分类" prop="cateName" align="center"/>
        <el-table-column v-if="statusForm.purchaseChecked === true" label="购买时间" prop="purchaseTime" align="center"/>
        <el-table-column v-if="statusForm.speciChecked === true" label="规格型号" prop="specification" align="center"/>
        <el-table-column v-if="statusForm.usageChecked === true" label="使用时间" prop="usageTime" align="center"/>
        <el-table-column v-if="statusForm.useCompanyChecked === true" label="使用单位" prop="useCompany" align="center"/>

        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="addDeveice(scope.row.id)">修改</el-button>
            <el-button type="text" @click="claimDeveice(scope.row.id)">要求</el-button>
            <el-button type="text" @click="deleteDeveice(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        :total="totalCount"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
      <device-add-or-update ref="deviceAddOrUpdate" @refreshDataList="getDataList"></device-add-or-update>
<!--      搜索-->
      <device-claim ref="deviceClaim" ></device-claim>
      <batch-import
        v-if="batchImportVisible"
        ref="batchImport"
        @uploadFile="uploadFile"
      />
      <list-display ref="listDisplay" @func="getfunc"></list-display>
    </div>
  </div>
</template>

<script>
import DeviceSearch from './region/device-search'
import paperCate from '../paper/papercate'
// import RegionSearch from './region/region-search'
import DeviceClaim from './region/device-claim'
// import BatchImport from '../questions/batchimport'
import BatchImport from '../questions/batchimport'
import DeviceAddOrUpdate from './device-add-or-update'
import ListDisplay from './region/listdisplay'
export default {
  name: 'device-management',
  components: { DeviceClaim, paperCate, DeviceAddOrUpdate, DeviceSearch, ListDisplay, BatchImport },
  data() {
    return {
      dataList: [],
      SearchVisible: false,
      current: {},
      batchImportVisible: false,
      statusList: [],
      dataForm: {
        deviceName: '',
        manufacturer: '',
        useCompany: '',
        status: '',
        areaId:''
      },
      statusForm: {
        cateChecked: false,
        purchaseChecked: false,
        speciChecked: false,
        usageChecked: false,
        useCompanyChecked: false
      },
      dataListSelections: [],
      pageIndex: 1,
      pageSize: 10,
      cateId: '',
      totalCount: 0
    }
  },
  mounted() {
    this.$refs.paperCate.init()
    this.getDataList()
  },
  methods: {
    onCloseSearch() {
      this.SearchVisible = false
    },
    _export() {
      window.location = this.$http.downloadUrl('/device/devicemanagement/exportDevice')
    },
    onSearch(dataForm) {
      console.log(dataForm)
      this.dataForm = dataForm
      this.cateId = dataForm.cateId
      this.pageIndex = 1
      this.totalCount = 0
      this.getDataList()
    },
    getfunc(data) {
      this.statusForm = data
    },
    decicvSearch () {
      // this.$nextTick(() => {
      //   this.$refs.deviceSearch.init()
      //
        this.$refs.deviceSearch.open()
    },
    _import() {
      this.cateId = 0
      this.batchImportVisible = true
      this.$nextTick(() => {
        this.$refs.batchImport.init(8)
      })
    },
    // 导入后上传文件处理
    async uploadFile(file) {
      let Loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.7)'
      })
      let data = new FormData()
      data.append('file', file)
      let res = await this.$http.post('/device/devicemanagement/importDevice', data)
      Loading.close()

      if (res.code === 200) {
        this.$notify.success({ title: '成功', message: '导入成功' })
        this.batchImportVisible = false
        // this.getDataList(1)
        await this.getDataList(1)
        this.$refs.paperCate.init()
      } else {
        this.$notify.error({ title: '错误', message: res.msg })
      }
    },
    // 搜索
    displayList() {
      this.$nextTick(() => {
        this.$refs.listDisplay.open()
      })
    },
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    setCurrent(data) {
      this.current = data
      this.cateId = data.id
      this.getDataList(1)
    },
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    async getDataList(page) {
      if (page) this.pageIndex = page
      const res = await this.$http.post('/device/devicemanagement/page', {
        deviceName: this.dataForm.deviceName,
        status: this.dataForm.status,
        manufacturer: this.dataForm.manufacturer,
        useCompany: this.dataForm.useCompany,
        areaId: this.dataForm.areaId,
        page: this.pageIndex,
        limit: this.pageSize,
        cateId: this.cateId
      })
      this.dataList = res.data.list
      this.totalCount = res.data.totalCount
    },
    claimDeveice(id) {
      this.$nextTick(() => {
        this.$refs.deviceClaim.init(id)
      })
    },
    addDeveice(id) {
      this.$nextTick(() => {
        this.$refs.deviceAddOrUpdate.open(id)
      })
    },
    async deleteDeveice(id) {
      var ids = id || this.dataListSelections.map(item => item.id).join(',')
      var confirm = await this.$confirm(`确定要进行删除操作吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      if (confirm !== 'confirm') return

      let res = await this.$http({
        url: '/device/devicemanagement/delete',
        method: 'post',
        data: {
          ids: ids
        }
      })
      if (res && res.code === 200) {
        this.$notify.success({ title: '成功', message: '删除成功' })
        this.pageIndex > 1 && this.dataList.length <= 1 && this.pageIndex --
        this.getDataList()
      } else {
        this.$notify.error({ title: '错误', message: res.msg })
      }
    }
  }
}
</script>

<style scoped>
.process-box{
  display: flex;
  height: 100%;
}
/*.process-left{*/
/*  padding-right: 10px;*/
/*  border-right: 1px solid #9e9e9e;*/
/*}*/
  .process-right{
    flex: 1;
    padding-left: 10px;
    overflow: auto;
  }
.process-left{
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #c8c8c8;
 }
}
</style>
